<template>
	<view class="container">
		<view class="page-banner">
			<view class="title">
			</view>
			<view class="grid-body">
				<view class="background-white">
					<uni-forms class='form' :modelValue="formData">
						<!-- <uni-forms-item label="单选题题目数" name="singleCount">
              <uni-number-box :min="0" :max="200" v-model="formData.singleCount" @change="change($event, '4')" />
            </uni-forms-item>
            <uni-forms-item label="多选题题目数" name="multipleCount">
              <uni-number-box :min="0" :max="200" v-model="formData.multipleCount" @change="change($event, '5')" />
            </uni-forms-item>
            <uni-forms-item label="判断题题目数" name="judgementCount">
              <uni-number-box :min="0" :max="200" v-model="formData.judgementCount" @change="change($event, '6')" />
            </uni-forms-item>
						<uni-forms-item label="单选题分数/题" name="singleScore">
							<uni-number-box :min="2" :max="100" v-model="formData.singleScore" @change="change($event, '1')" />
						</uni-forms-item>
						<uni-forms-item label="多选题分数/题" name="multipleScore">
							<uni-number-box :min="2" :max="100" v-model="formData.multipleScore" @change="change($event, '2')" />
						</uni-forms-item>
						<uni-forms-item label="判断题分数/题" name="judgementScore">
							<uni-number-box :min="2" :max="100" v-model="formData.judgementScore" @change="change($event, '3')" />
						</uni-forms-item> -->
						<uni-forms-item label="试卷满分" name="totalScore">
							<uni-easyinput type="text" v-model="formData.totalScore" disabled="disabled" />
						</uni-forms-item>
						<uni-forms-item label="合格分" name="passScore">
							<uni-number-box :min="0" :max="Number(formData.totalScore)" v-model="formData.passScore" />
						</uni-forms-item>
						<uni-forms-item label="答题时长(分钟)" name="duration">
							<uni-number-box :min="0" :max="200" v-model="formData.duration" />
						</uni-forms-item>
					</uni-forms>
				</view>
			</view>
		</view>
		<view class="page-footer flex-center">
			<!-- 开始考试 -->
			<view class="btn-group">
				<view class="big-btn pause" @click="handleEnded">返回</view>
				<view class="big-btn submit" @click="confirmAnswer">确定</view>
			</view>
		</view>

	</view>
</template>

<script>
	import {
		getPaperDetail,
		startSimulationTest
	} from '@/api/educational-training/simulation-test.js';
	import {
		examinationStatus
	} from '@/utils/constant'
	import ExaminationDialog from "./components/ExaminationDialog"
	import TipDialog from "./components/TipDialog"

	export default {
		name: 'take-part-examination',

		props: {},

		data() {
			return {
				formData: {
					singleCount: 0,
					multipleCount: 0,
					judgementCount: 0,
					count: 0,
					singleScore: 5,
					multipleScore: 5,
					judgementScore: 5,
					totalScore: '',
					passScore: 0,
					duration: 0,
				},
				examinationStatus,
				examPlanId: '',
				paperId: '',
				testPaperData: {
					judgementList: [],
					multipleTitle: [],
					singleTitle: []
				},
				timer: null,
				examinationDialogStatus: examinationStatus.PAUSE,
				examinationDialogVisible: false,
				examinationResult: {},
				tipDialogVisible: false,
				isSubmit: false, // 是否已提交（防止多次提交）
				examDuration: 0, // 考试总时间(秒)
				type: "", // 考试类型 "" 正常考试, 1 题库训练, 2 模拟训练
				typeId: "", // 试题类型ID
				progressId: "" // 模拟考试进度id
			}
		},

		components: {
			ExaminationDialog,
			TipDialog,
		},

		computed: {},

		watch: {},

		created() {
			//this.getPapertotalScore()
		},
		mounted() {
			//this.change()
		},

		onLoad({
			id
		}) {
			this.paperId = id
			this.getPapertotalScore()
		},

		methods: {
			async getPapertotalScore() {
				const res = await getPaperDetail(this.paperId)
				this.formData.totalScore = res.data.totalScore
				this.formData.count = res.data.totalQuestion
			},
			change(v, i) {
				if (i === '1') this.formData.singleScore = v
				else if (i === '2') this.formData.multipleScore = v
				else if (i === '3') this.formData.judgementScore = v
				else if (i === '4') this.formData.singleCount = v
				else if (i === '5') this.formData.multipleCount = v
				else if (i === '6') this.formData.judgementCount = v
				let {
					singleCount,
					singleScore,
					multipleCount,
					multipleScore,
					judgementCount,
					judgementScore
				} = this.formData
				this.formData.count = Number(singleCount) + Number(multipleCount) + Number(judgementCount)
				this.formData.totalScore = singleScore * singleCount + multipleScore * multipleCount + judgementScore *
					judgementCount
				console.log('totalScore', this.formData.totalScore)
			},
			async confirmAnswer() {
				console.log('进入答题')
				console.log('formData', this.formData)

				if (this.formData.passScore < 1) {
					this.$modal.showToast('合格分不能为0')
					return
				}
				if (this.formData.duration < 1) {
					this.$modal.showToast('答题时长不能为0')
					return
				}


				const res = await startSimulationTest({
					paperId: this.paperId,
					duration: this.formData.duration,
					passScore: this.formData.passScore
				})
				console.log(res)
				uni.navigateTo({
					url: `/pages/work/mock-test/take-part-mock-test?id=${res.data}`
				})
			},

			// 获取路由参数
			getRoute() {
				let pages = getCurrentPages();
				let curPage = pages[pages.length - 1];
				return curPage.options || curPage.$route.query;
			},

			handleEnded() {
				// uni.redirectTo({ url: `/pages/work/online-examination/index` })
				uni.navigateBack()
			}
		},
	}
</script>

<style>
	page {
		height: 100%;
	}
</style>
<style scoped lang="scss" type="text/scss">
	.container {
  background-color: #88b4c4;
  position: relative;
  height: 100%;
  overflow-y: auto;
  padding-bottom: 180rpx;
}
.page-banner {
  padding: 0 30rpx;
  .title {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    font-size: 12px;
    color: #ffffff;

    .right {
      .time {
        transform: translateY(10%);
        width: 26rpx;
        height: 26rpx;
      }
      > text {
        padding-left: 10rpx;
      }
      .text {
        color: #dfe8eb;
      }
    }
    .num {
      padding-left: 20rpx;
      .big {
        font-size: 56rpx;
      }
    }
  }
  .progress {
    margin-top: 16rpx;
  }
  .grid-body {
    margin: 60rpx 0 0;
    padding: 30rpx;
    color: #333333;

    .type {
      width: 100rpx;
      height: 50rpx;
      line-height: 50rpx;
      background: #88b4c4;
      border-radius: 10rpx 10rpx 10rpx 10rpx;
      color: #fff;
      font-size: 12px;
      text-align: center;
    }

    .content {
      margin-top: 30rpx;
      margin-bottom: 40rpx;
      font-size: 30rpx;
      font-weight: bold;
      word-break: break-all;
    }

    .option {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding:30rpx 30rpx 30rpx 20rpx;
      width: 100%;
      // min-height: 88rpx;

      background: #f5f5f5;
      border-radius: 10rpx 10rpx 10rpx 10rpx;
      margin-bottom: 20rpx;
      font-size: 30rpx;

      & text{
        display: inline-block;
        min-height: 48rpx;
        line-height: 48rpx;
      }
      &.active {
        background: #ebf2f5;
      }
      image {
        width: 48rpx;
        height: 48rpx;
        flex-shrink: 0;
      }
    }
    .btn-group {
      margin-top: 40rpx;
    }
    .preview {
      width: 300rpx;
      background-color: #fff;
      color: #88b4c4;
      border: 1px solid #88b4c4;
    }
    .next {
      width: 300rpx;
      color: #fff;
      background-color: #88b4c4;
    }
  }
}
.page-footer {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 158rpx;
  background-color: #fff;
  padding-right: 30rpx;
  padding-left: 46rpx;
  display: flex;

  .answer-sheet image {
    display: block;
    margin: 0 auto 5rpx;
    width: 54rpx;
    height: 54rpx;
  }
  .pause {
    width: 231rpx;
    color: #fff;
    background: #c4c088;
  }
  .submit {
    margin-left: 30rpx;
    width: 231rpx;
    color: #fff;
    background: #454a5e;
  }
}
.btn-group {
  display: flex;
  justify-content: space-between;

  .big-btn {
    border-radius: 44rpx 44rpx 44rpx 44rpx;
    font-size: 34rpx;
    text-align: center;
    height: 88rpx;
    line-height: 88rpx;
  }
}
.form{
	::v-deep  .uni-forms-item__label{
		width: 110px!important;
	}
	::v-deep  .uni-data-checklist .checklist-group .checklist-box{
		margin-right: 5px;
	}
}
</style>
